import React, { useState, useEffect } from 'react';
import { Badge, Dropdown, List, Button, Typography, Empty, Space } from 'antd';
import {
  BellOutlined,
  TrophyOutlined,
  GiftOutlined,
  DollarOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';

const { Text } = Typography;

const NotificationBell = () => {
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);

  // Mock notifications - in real app, this would come from API
  useEffect(() => {
    const mockNotifications = [
      {
        id: 1,
        type: 'interest',
        title: 'Daily Interest Available',
        message: 'You have 15.5 GOD tokens in interest ready to claim',
        time: '2 hours ago',
        read: false,
        icon: <TrophyOutlined style={{ color: '#52c41a' }} />
      },
      {
        id: 2,
        type: 'referral',
        title: 'New Referral',
        message: 'Someone joined using your referral link',
        time: '1 day ago',
        read: false,
        icon: <GiftOutlined style={{ color: '#1890ff' }} />
      },
      {
        id: 3,
        type: 'reward',
        title: 'Referral Reward',
        message: 'You earned 10 GOD tokens from your referral activity',
        time: '2 days ago',
        read: true,
        icon: <DollarOutlined style={{ color: '#faad14' }} />
      }
    ];

    setNotifications(mockNotifications);
    setUnreadCount(mockNotifications.filter(n => !n.read).length);
  }, []);

  const handleMarkAsRead = (id) => {
    setNotifications(prev =>
      prev.map(notification =>
        notification.id === id ? { ...notification, read: true } : notification
      )
    );
    setUnreadCount(prev => Math.max(0, prev - 1));
  };

  const handleMarkAllAsRead = () => {
    setNotifications(prev =>
      prev.map(notification => ({ ...notification, read: true }))
    );
    setUnreadCount(0);
  };

  const getNotificationIcon = (type) => {
    const icons = {
      interest: <TrophyOutlined style={{ color: '#52c41a' }} />,
      referral: <GiftOutlined style={{ color: '#1890ff' }} />,
      reward: <DollarOutlined style={{ color: '#faad14' }} />,
      system: <CheckCircleOutlined style={{ color: '#722ed1' }} />
    };
    return icons[type] || icons.system;
  };

  const notificationList = (
    <div className="w-80 bg-white rounded-lg shadow-lg">
      <div className="p-4 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <Text strong>Notifications</Text>
          {unreadCount > 0 && (
            <Button
              type="link"
              size="small"
              onClick={handleMarkAllAsRead}
              className="text-xs"
            >
              Mark all as read
            </Button>
          )}
        </div>
      </div>

      <div className="max-h-96 overflow-y-auto">
        {notifications.length > 0 ? (
          <List
            dataSource={notifications}
            renderItem={(notification) => (
              <List.Item
                className={`px-4 py-3 hover:bg-gray-50 cursor-pointer ${
                  !notification.read ? 'bg-blue-50' : ''
                }`}
                onClick={() => handleMarkAsRead(notification.id)}
              >
                <List.Item.Meta
                  avatar={notification.icon}
                  title={
                    <div className="flex items-center justify-between">
                      <Text strong={!notification.read}>
                        {notification.title}
                      </Text>
                      {!notification.read && (
                        <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                      )}
                    </div>
                  }
                  description={
                    <div>
                      <Text type="secondary" className="text-xs block">
                        {notification.message}
                      </Text>
                      <Text type="secondary" className="text-xs mt-1 flex items-center">
                        <ClockCircleOutlined className="mr-1" />
                        {notification.time}
                      </Text>
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        ) : (
          <div className="p-8 text-center">
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description="No notifications"
            />
          </div>
        )}
      </div>

      {notifications.length > 0 && (
        <div className="p-3 border-t border-gray-200 text-center">
          <Button type="link" size="small">
            View all notifications
          </Button>
        </div>
      )}
    </div>
  );

  return (
    <Dropdown
      overlay={notificationList}
      trigger={['click']}
      placement="bottomRight"
      overlayClassName="notification-dropdown"
    >
      <Button
        type="text"
        icon={
          <Badge count={unreadCount} size="small">
            <BellOutlined className="text-lg" />
          </Badge>
        }
        className="flex items-center"
      />
    </Dropdown>
  );
};

export default NotificationBell;